<template>
  <div class="cart">
    <van-nav-bar title="购物车" nav-bar-text-color="@white" />

    <div class="cartShow" v-if="user">
      <van-tabs v-model="active">
        <van-tab title="全部(20)">
          <div class="main-zone">
            <div class="main-show">
              <div class="row-first" style="margin-top: 0.1rem">
                <div class="row-l">
                  <input
                    type="checkbox"
                    v-model="checkAll"
                    style="width: 0.3rem; height: 0.15rem"
                    @change="changeAll"
                  />
                  <span>小U自营</span>
                </div>
                <div class="row-r">
                  <span>已免运费</span>
                  <span>领券</span>
                </div>
              </div>

              <div class="row-second">
                <div
                  class="row-second-inner"
                  v-for="(item, index) in cart"
                  :key="item.id"
                >
                  <!-- 保证每一个多选框都是唯一的  给每个item加上checkd -->
                  <input
                    type="checkbox"
                    v-model="item.checked"
                    style="width: 0.3rem; height: 0.15rem"
                    @change="changeOne"
                  />
                  <img :src="$pregImg + item.img" alt="" />
                  <div class="row-second-r">
                    <p>{{ item.goodsname }}</p>
                    <p>规格:不错的商品</p>
                    <p class="p4">比加入时降低&yen;100</p>
                    <div class="row-second-b">
                      <div class="b-l">
                        <span class="sp1">&yen;{{ item.price }}</span>
                        <span class="sp2">&yen;5099</span>
                      </div>
                      <div class="b-r">
                        <span class="sp01" @click="minus(item.id, index)"
                          >-</span
                        >
                        <input type="text" class="in01" v-model="item.num" />
                        <span class="sp02" @click="add(item.id, index)">+</span>

                        <div class="b-del">
                          <button
                            type="button"
                            class="btn btn-danger"
                            @click="del(item.id)"
                          >
                            删除
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- <div class="row-first"  style="display:flex;height:.3rem;line-height:.3rem;justify-content:space-between;font-size:.18rem;background:#fff;margin:.1rem 0rem;padding:0px .1rem">
          <div class="row-l" >
            <input type="checkbox" v-model="isChecked" name="selectAll" style="width:.3rem;height:.15rem;"/>
            <span>小U自营</span>
          </div>
          <div class="row-r" style="display:flex;">
            <span>已免运费</span>
            <div class="shu" style="width:.01rem;height:.2rem;background:#000;margin-top:.05rem;margin-left:.1rem;margin-right:.1rem;"></div>
            <span style="color:#f0866e;">领券</span>
          </div>
        </div> -->

          <!-- 滑动组件怎么自定义属性加button按钮和复选框 -->
          <!-- <van-swipe-cell>
          <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            class="goods-card"
            thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell> -->
        </van-tab>
        <van-tab title="降价(4)">内容 2</van-tab>
        <van-tab title="常卖(4)">内容 3</van-tab>
        <van-tab title="分类">内容 4</van-tab>
      </van-tabs>

      <!-- 主区域 -->

      <!-- 全选固定导航栏 -->
      <div class="nav-fix-all">
        <div class="inner">
          <a href="" class="a1">
            <input
              type="checkbox"
              v-model="checkAll"
              style="width: 0.3rem; height: 0.15rem"
              @change="changeAll"
            />
            <span>全选</span>
          </a>
          <a href="" class="a2">
            <span>合计</span>
            <span>已免运费</span>
          </a>
          <a href="" class="a3">
            <span>&yen;{{ total }}</span>
            <span style="display: none">&yen;{{ subNum }}</span>
            <span>已优惠&yen;200元</span>
          </a>
          <input type="submit" value="结算" @click="balance" />
        </div>
      </div>
    </div>
    <div class="goLogin" v-else>
      <van-empty description="您还没有登录呢">
        <van-button
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          round
          @click="$router.push('/login')"
        >
          去登录
        </van-button>
      </van-empty>
    </div>
    <br />
    <br />
    <br />
    <br />
  </div>
</template>

<script >
import { mapActions, mapGetters } from "vuex";
import { updateCartList } from "../../request/api";
export default {
  data() {
    return {
      checked: false,
      checkAll: false,
      active: 0,
      addressId: 1,
    };
  },
  computed: {
    ...mapGetters({
      cart: "cart/cart",
      user: "user",
    }),
    total() {
      let sum = 0;
      this.cart.forEach((item) => {
        console.log(item.checked);
        if (item.checked) {
          sum += item.price * item.num;
        }
      });
      return sum;
    },
    subNum() {
      let num = 0;
      this.cart.forEach((item) => {
        if (item.checked) {
          num += item.num;
        }
      });
      return num;
    },
  },
  methods: {
    ...mapActions({
      cartActions: "cart/changeCartActions",
      updataActions: "cart/updateCartActions",
      delActions: "cart/delCartActions",
    }),
    add(id, index) {
      // 2表示增加 type类型值
      // this.updataActions([id, 1, index]);
      let data = {
        id: id,
        type: 2,
      };
      updateCartList(data).then((res) => {
        if (res.code === 200) {
          this.cart[index].num++;
        }
      });
      // this.cartActions(JSON.parse(sessionStorage.getItem("user")).uid);
    },
    minus(id, index) {
      // 1表示减少 type类型值
      // console.log(this.cart[index].num);
      // if (this.cart[index].num <= 1) {
      //   // this.updataActions([id, 1, index]);
      //   this.cart[index].num = 1;
      // } else {
      //   console.log(this.cart);
      //   this.cart[index].num--;
      //   // this.updataActions([id, 1, index]);
      // }
      if (this.cart[index].num > 1) {
        // this.updataActions([id, 1, index]);
        let data = {
          id: id,
          type: 1,
        };
        updateCartList(data).then((res) => {
          if (res.code === 200) {
            this.cart[index].num--;
          }
        });
      } else {
        // alert("不能再点击了")
        return;
      }
      // this.cartActions(JSON.parse(sessionStorage.getItem("user")).uid);
    },
    del(id) {
      this.delActions(id);
      this.cartActions(JSON.parse(sessionStorage.getItem("user")).uid);
    },
    changeAll() {
      this.cart.forEach((item) => {
        item.checked = this.checkAll;
      });
    },
    changeOne() {
      this.checkAll = this.cart.every((item) => item.checked);
    },
    jiesuan() {
      let idstr0 = [];
      let arr = [];
      this.cart.forEach((item) => {
        if (item.checked) {
          arr.push(item);
          idstr0.push(item.id);
        }
      });
      let idstr = idstr0.join(",");
      let data = {
        uid: JSON.parse(sessionStorage.getItem("user")).uid,
        countmoney: this.total,
        countnumber: this.subNum,
        // address: this.addressId++,
        list: arr,
        idstr,
      };
      return data;
    },
    balance() {
      if (this.subNum) {
        let data = this.jiesuan();
        console.log(data);
        //  this.$toast.success("进入订单页面");
        this.$router.push({
          path: "/order",
          query: {
            data,
          },
        });
      } else {
        alert("请选中你想要购买的商品哈");
      }

      // console.log(data);
      // orderAdd(data).then((res) => {
      //   if (res.code === 200) {
      //     console.log(res);
      //     this.$toast.success("进入订单页面");
      //     this.$router.push({
      //       path: "/order",
      //       // query: {
      //       //   res
      //       // },
      //     });
      //   }
      // });
    },
  },
  mounted() {
    this.cartActions(JSON.parse(sessionStorage.getItem("user")).uid);
    document.title = this.$route.meta.title;
    // setTimeout(() => {
    //   console.log(this.cart);
    // }, 3000);
  },
};
</script>

<style scoped>
/* 购物车 滑块样式*/
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}

/* 去掉顶部底部线框
/deep/ 穿透scoped vant样式进来
*/
/deep/ [class*="van-hairline"]::after {
  border: none;
}

/* 顶部返回字体样式 */
/deep/.van-nav-bar {
  background: #ff6040;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #fff;
}
/deep/ .van-nav-bar__text {
  font-size: 0.12rem;
  color: #fff;
}
/deep/ .van-nav-bar .van-icon {
  font-size: 0.12rem;
  color: #fff;
}

/* 平板样式改不了 */
/deep/ van-tab__text,
van-tab__text--ellipsis {
  font-size: 0.52rem !important;
}
/* /deep/.van-tab {
  color: #fff;
} */
/* 
/deep/.van-tabs__nav {
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  height: .2rem;
}

/deep/ .van-tabs__line {
  background-color: transparent;
}
/deep/ .van-tab--active {
  font-size: 0.14rem;
}
 /deep/ .van-nav-bar__content{
     height: 48px;
 } */

/deep/ .van-nav-bar__content {
  height: 48px;
}
/deep/ .van-tab {
  color: #fff;
}
.btn-danger {
  width: 0.6rem;
  height: 0.4rem;
  font-size: 0.12rem;
  text-align: center;
}
.b-del {
  position: absolute;
  top: -300%;
  left: -8%;
}

/deep/ .van-tabs__wrap .van-tabs__nav {
  background-image: linear-gradient(
    180deg,
    #ff6040 0%,
    #ff8a80 100%
  ) !important;
}
</style>